import { User } from '@/types/api'
import { Button, Table, Form, Input, Select, Space, TableColumnsType, Checkbox } from 'antd'
import { ColumnsType } from 'antd/es/table'
import { useEffect, useState } from 'react'
import api from '@/api'
import { formatDate } from '@/utils'

function UserList(): JSX.Element {
  const [data, setData] = useState<User.UserItem[]>([])
  //获取数据
  const getUserList = async () => {
    const params: User.Params = {
      pageNum: 1,
      pageSize: 9999
    }
    const data = await api.getUserList(params)
    setData(data.list)
  }

  useEffect(() => {
    //获取数据
    getUserList()
  }, [])
  
  
  const columns: ColumnsType<User.UserItem> = [
    {
      title: '用户id',
      dataIndex: 'userId',
      key: 'userId'
    },
    {
      title: '用户名称',
      dataIndex: 'userName',
      key: 'userName'
    },
    {
      title: '用户邮箱',
      dataIndex: 'userEmail',
      key: 'userEmail'
    },
    {
      title: '用户角色',
      dataIndex: 'role',
      key: 'role',
      render(role:number){
        return {
          0:'超级管理员',
          1:'管理员',
          2:'体验管理员'
        }[role]
      }
    },
    {
      title: '用户状态',
      dataIndex: 'state',
      key: 'state',
      render(state:number){
        return {
          1:'在职',
          2:'离职',
          3:'试用期'
        }[state]
      }
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render(createTime:string){
        return  formatDate(createTime)
      }
    },
    {
      title: '操作',
      dataIndex: 'address1',
      key: 'address1',
      render() {
        return (
          <Space>
            <Button type='text'>编辑</Button>
            <Button type='text' danger>
              删除
            </Button>
          </Space>
        )
      }
    }
  ]

  return (
    <div className='user-list'>
      <Form className='search-form' layout='inline' initialValues={{ state: 0 }}>
        <Form.Item name='userId' label='用户ID'>
          <Input placeholder='请输入用户ID' />
        </Form.Item>
        <Form.Item name='userName' label='用户名称'>
          <Input placeholder='请输入用户名称' />
        </Form.Item>
        <Form.Item name='state' label='状态'>
          <Select
            style={{ width: 120 }}
            options={[
              { value: '0', label: <span>所有</span> },
              { value: '1', label: <span>在职</span> },
              { value: '2', label: <span>试用期</span> },
              { value: '3', label: <span>离职</span> }
            ]}
          />
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type='primary'>搜索</Button>
            <Button type='primary'>重置</Button>
          </Space>
        </Form.Item>
      </Form>

      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>用户列表</div>
          <div className='action'>
            <Button type='primary'>新增</Button>
            <Button type='primary' danger>
              批量删除
            </Button>
          </div>
        </div>
        <Table bordered={false} rowSelection={{type:'checkbox'}} rowKey="userId" dataSource={data}  columns={columns} />;
      </div>
    </div>
  )
}

export default UserList
